<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>xuluo</title>
	<link rel="stylesheet" type="text/css" href="css/chimee.css">
	<script type="text/javascript" src="js/chimee.browser.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;font-family:'microsoft yahei',SimSun}
		button,input,select,textarea{outline:0;border:none;color:inherit;font-size:inherit}
		.btn{display:inline-block;padding:0 22px;line-height:30px;background:#009688;color:#fff;font-size:15px;cursor:pointer;vertical-align:middle;border-radius:2px}
		.btn:hover{opacity:1;filter:alpha(opacity=100)}
		.btn:active{opacity:.9;filter:alpha(opacity=90)}
		input[type=text]{border: 1px solid #ddd;line-height: 28px;vertical-align: middle;padding: 0 10px;width: 40%;}
	</style>
</head>
<body>
	<div id="wrapper" style="width: 100%;height: 200px;">
		
	</div>
	<div class="input" style="margin: 20px auto;text-align: center;">
		<input type="text"> <button class="emit btn" type="button">发送</button>
	</div>
	<script type="text/javascript" src="js/danmu.js"></script>
	<script type="text/javascript" src="js/controlbar.js"></script>
	<script type="text/javascript" src="js/state.js"></script>
	<script>
		// https://github.com/Chimeejs/chimee-plugin-danmu
		Chimee.install(chimeePluginDanmu);
		Chimee.install(chimeePluginControlbar);
		Chimee.install(chimeePluginCenterState);
		var player=new Chimee({
			wrapper: '#wrapper',  // video dom容器
			src: 'http://www.yirongzhan.com/ryd.mp4',
			autoplay: true,
			controls: true,
			playsInline: true,
			preload: 'auto',
			x5VideoPlayerFullscreen: true,
			x5VideoOrientation: 'landscape|portrait',
			xWebkitAirplay: true,
			muted: true,
			plugin: [
			  	{
					name: chimeePluginDanmu.name,
					mode: 'canvas',
					updateByVideo: false
			  	},
				{
				  // 插件名为 controller
				  name: chimeePluginControlbar.name,
				},
				{
				  // 插件名为 controller
				  name: chimeePluginCenterState.name,
				}
			],
			// removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState'] // 需要移除的插件
		});
		document.querySelector('.emit').onclick=function () {
	      var text = document.querySelector('input').value;
	      player.__dispatcher.plugins.chimeeDanmu.sendMsg(text);
	    };
	    player.on('danmuContextmenu', function (d) {
	      console.log(d);
	    });
	</script>
</body>
</html>